<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
  </ul>
  <button id="test">test</button>
  <div id="content">
      aaaaaaa
  </div>
  <!-- 
    宏任务
    微任务
    渲染页面

    script宏任务  => 取出所有微任务执行 =>渲染页面 =>  取出第一个宏任务执行 => 取出所有微任务执行 => 渲染页面
   -->
  <script> /* script宏任务 => 它不进入宏队列  */
    setTimeout(() => {// 宏任务
        alert(document.getElementById('content').innerHTML)  // 页面渲染了吗?
    }, 0)
    Promise.resolve().then(() => { // 微任务
        alert('promise1') // 页面渲染了吗?
    }) 
    Promise.resolve().then(() => { // 微任务
        alert('promise2') // 页面渲染了吗?
    }) 

    document.getElementById('test').onclick = () => {// 宏任务
        document.getElementById('content').innerHTML = 'xxxx'  // 更新DOM
        setTimeout(() => {// 宏任务  
            alert('timout') // 页面更新渲染了吗?
        }, 0)
        Promise.resolve().then(() => { // 微任务 
            alert('promise3') //页面更新渲染了吗?
        }) 
    }
    alert('1111') // 页面渲染了吗?  
  </script>
</body>
</html>